@charset "utf-8";
*{
	margin: 0;
	padding:0;
	font-family: "华文彩云";
	font-size: 80px;
                                                                                         
	
}
body{
	background-image: url(../img2/背景图1.jpg);
	background-size: 100% 927px;
	background-repeat: no-repeat;
}
.xiangrikui{
	width: 200px;
	height:200px;
	background: url(../img2/向日葵.png);
	background-size: 100% 100%;
	position: relative;
	top: -4px;
	left: 280px;

	animation: xiangrikui 1s ease-in-out infinite;
	}
	
	@keyframes xiangrikui{
		0% {
		     transform: translateX(0px);
		   }
		   25% {
		     transform: translateX(5px);
		   }
		   50% {
		     transform: translateX(-5px);
		   }
		   75% {
		     transform: translateX(5px);
		   }
		   100% {
		     transform: translateX(0px);
	}
	}
	.box2{
		width: 200px;
		height:200px;
		background: url(../img2/向日葵.png);
		background-size: 100% 100%;
		position: relative;
		top: -58px;
		left: 282px;

		animation: box2 1s ease-in-out infinite;
		}
		@keyframes box2{
			0% {
			     transform: translateX(0px);
			   }
			   25% {
			     transform: translateX(-5px);
			   }
			   50% {
			     transform: translateX(5px);
			   }
			   75% {
			     transform: translateX(-5px);
			   }
			   100% {
			     transform: translateX(0px);
		}
		}
		
		.box3{
			width: 200px;
			height:200px;
			background: url(../img2/向日葵.png);
			background-size: 100% 100%;
			position: relative;
			top: -107px;
			left: 283px;

			animation: box3 1s ease-in-out infinite;
			}
		@keyframes box3{
			0% {
			     transform: translateX(0px);
			   }
			   25% {
			     transform: translateX(5px);
			   }
			   50% {
			     transform: translateX(-5px);
			   }
			   75% {
			     transform: translateX(5px);
			   }
			   100% {
			     transform: translateX(0px);
		}
		}
		.box4{
			width: 300px;
			height: 200px;
			background-image: url(../img2/太阳.png);
			background-size: 100% 100%;
			position: relative;
			top: -810px;
			left: 283px;

            animation: box4 5s linear  infinite;
		}
		@keyframes box4{
			0% {
			     /* 起始状态：顶部，透明度0（可选，加淡入效果） */
			     transform: translateY(-810px);
			     opacity: 1;
			   }
			   100% {
			     transform: translateY(600px);
			     opacity: 1;
			}
			
		}
		.dou{
			width: 100px;
			height:100px;
			background: url(../img2/豌豆射手.png);
			background-size: 100% 100%;
			position: relative;
			top: -745px;
			left: 496px;

			animation: dou 1s ease-in-out infinite;
			}
			@keyframes dou{
				0% {
				     transform: translateX(0px);
				   }
				   25% {
				     transform: translateX(-5px);
				   }
				   50% {
				     transform: translateX(5px);
				   }
				   75% {
				     transform: translateX(-5px);
				   }
				   100% {
				     transform: translateX(0px);
			}
			}
		.wandou{
			width: 70px;
			height:70px;
			background: url(../img2/豆豆.png);
			background-size: 100% 100%;
			position: relative;
			top: -850px;
			left: 554px;
			
            animation: wandou 2s ease-in-out infinite;
			}
			@keyframes wandou{
				0% {
				     transform: translateX(54px);
				     opacity: 1;
				   }
				   100% {
				     transform: translateX(700px);
				     opacity: 0;
			}
			}
			.jiangshi{
				width: 200px;
				height:200px;
				background: url(../img2/橄榄吃.gif);
				background-size: 100% 100%;
				position: relative;
				top: -858px;
				left: 1054px;
                animation: jiangshi 5s linear infinite;
				}
				
				
				@keyframes jiangshi{
					50%{
						transform: rotate(0);
						opacity: 1;
					
					}
					100%{
						transform: rotate(-90deg);
						opacity: 0;
					}
				}
				
		    .jianguo {
				width: 125px;
				height:125px;
				background: url(../img2/1.png);
				background-size: 100% 100%;
				position: relative;
				top: -992px;
				left: 963px;
                animation: jianguo 5s linear infinite;

			}
			@keyframes jianguo{
				50%{
					background: url(../img2/2.png);
					background-size: 100% 100%;
				}
				100%{
					background: url(../img2/3.png);
					background-size: 100% 100%;
				}
			}
			.shi{
				width: 200px;
				height:200px;
				background: url(../img2/put.gif);
				background-size: 100% 100%;
				position: relative;
				top: -1344px;
				left: 950px;

				animation: shi 5s linear infinite;
				
                



            }
			@keyframes shi{
				25%{
					left: 899px;
					transform: rotate(0);
					opacity: 1;
				}
				50%{
					left: 799px;
					transform: rotate(0);
					opacity: 1;
				}
				75%{
					transform: rotate(-90deg);
					opacity: 1;
				}
				100%{
					transform: rotate(-90deg);
					left: 799px;
					opacity: 0;
				}
			}
			.bing{
				width: 100px;
				height:100px;
				background: url(../img2/寒冰射手.png);
				background-size: 100% 100%;
				position: relative;
				top: -1288px;
				left: 496px;
				animation: bing 1s ease-in-out infinite;
			}
        @keyframes bing{
				0% {
				     transform: translateX(0px);
				   }
				   25% {
				     transform: translateX(5px);
				   }
				   50% {
				     transform: translateX(-5px);
				   }
				   75% {
				     transform: translateX(5px);
				   }
				   100% {
				     transform: translateX(0px);
			}
			}
			.bingdou{
				width: 70px;
				height:70px;
				background: url(../img2/豆豆蓝.png);
				background-size: 100% 100%;
				position: relative;
				top: -1400px;
				left: 551px;

				animation: wandou 2s ease-in-out infinite ;
			}
			.chenggan{
				width: 300px;
				height:300px;
				background: url(../img2/撑杆僵尸.gif);
				background-size: 100% 100%;
				position: relative;
				top: -1331px;
				left: 953px;
				animation: chenggan 5s linear infinite;

			}
			@keyframes chenggan {
				25%{
					left: 853px;
					opacity: 1;
					
				}
				50%{
					left: 753px;
					opacity: 1;
				}
				75%{
					
					left: 653px;
					opacity: 1;
					
				}
				100%{
					
					left: 553px;
					opacity: 0;
				}
			}
			.ri{
				width: 200px;
				height:200px;
				background: url(../img2/向日葵.png);
				background-size: 100% 100%;
				position: relative;
				top: -1528px;
				left: 284px;



				animation: box2 1s ease-in-out infinite;
				
				
			}
			.kui{
				width: 200px;
				height:200px;
				background: url(../img2/向日葵.png);
				background-size: 100% 100%;
				position: relative;
				top: -1566px;
				left: 272px;

				
				
				animation: xiangrikui 1s ease-in-out infinite;
			}
			.zhi{
				 width: 100px;
				height: 100px;
				 background: url(../img2/ji.png);
				background-size: 100% 100%;
				position: relative;
				top: -2020px;
				left: 500px;


				animation: box2 1s ease-in-out infinite;
			}
			.d1{
				width: 70px;
				height:70px;
				background: url(../img2/豆豆.png);
				background-size: 100% 100%;
				position: relative;
				top: -2117px;
				left: 559px;



				
				animation: wandou 2s ease-in-out infinite;
				
				
				
			}
			.d3{
				width: 70px;
				height:70px;
				background: url(../img2/豆豆.png);
				background-size: 100% 100%;
				position: relative;
				top: -2341px;
				left: 527px;


				
				
				animation: wandou 2s ease-in-out infinite;
			}
			.d2{
				width: 70px;
				height:70px;
				background: url(../img2/豆豆.png);
				background-size: 100% 100%;
				position: relative;
				top: -2270px;
				left: 495px;


				
				
				animation: wandou 2s ease-in-out infinite;
			}
			.wo{
				width: 100px;
				height: 300px;
				 background: url(../img2/wo.png);
				background-size: 100% 100%;
				position: relative;
				top: -2329px;
				left: 499px;
                animation: wo 5s linear infinite;
				}
				@keyframes wo{
					25%{
						top: -2429;
						opacity: 1;
						
					}
					50%{
						left: 499px;
						opacity: 1;
					}
					75%{
						
						top: -2429px;
						left: 599px;
						opacity: 1;
						
					}
					100%{
						top: -2329px;
						left: 699px;
						opacity: 0;
				}
					
				}
				.s{
					width: 200px;
					height:200px;
					background: url(../img2/s.gif);
					background-size: 100% 100%;
					position: relative;
					top: -2494px;
					left: 1171px;

					
					animation: s 5s linear infinite;
				}
				@keyframes s{
					25%{
						
						transform: rotate(0);
						opacity: 1;
					}
					50%{
						
						transform: rotate(0);
						opacity: 1;
					}
					75%{
						left: 671px ;
						transform: rotate(0);
						opacity: 1;
					}
					100%{
						transform: rotate(-90deg);
						left: 671px;
						opacity: 0;
					
					
					
				}
				